<template>
	<view class="w100  pl-30 pr-30">

		<uni-card>
			<view class="inforClass">试卷信息:</view>
			<view class="mt-20 fs-26">
				<text class="fw-600"> 试卷名称：</text>
				<text>{{ itemData.name }}</text>
			</view>
			<view class="rowsb rowsm mt-10 fs-26">
				<view class="ellipsis-text" v-if="itemData.studentName">
					<text class="fs-26 fw-600">学生姓名：</text>
					<text> {{ itemData.studentName }}</text>
				</view>
				<view class="ellipsis-text" v-else>
					<text class="fw-600 fs-26"> 考试时长：</text>
					<text>{{ itemData.allTime }}分钟</text>
				</view>
				<view class="ellipsis-text">
					<text class="fs-26 fw-600">实践课程：</text>
					<text>
						<!-- {{ itemData.practiceType == 1 ? '劳动教育' : itemData.practiceType == 2 ? '职业素养' :
							itemData.practiceType
								== 3 ? '应急安全' : itemData.practiceType == 4 ? '思政实践' : '创新创业' }} -->
						{{ (practiceType.find(v => v.id == itemData.practiceType) || {}).name }}
					</text>
				</view>
			</view>
			<view class="rowsb rowsm mt-10 fs-26" v-if="userId">
				<view class="ellipsis-text" v-if="itemData.userXyName">
					<text class="fw-600 fs-26"> 学院：</text>
					<text>{{ itemData.userXyName }}</text>
				</view>
				<uni-tooltip :content="proxyNameList.join(',')" placement="top" v-else>
					<view class="ellipsis-text">
						<text class="fw-600 fs-26"> 学院：</text>
						<text>{{ proxyNameList.join(',') }}</text>
					</view>
				</uni-tooltip>
				<view class="ellipsis-text" v-if="itemData.userZyName">
					<text class="fw-600 fs-26"> 专业：</text>
					<text>{{ itemData.userZyName }}</text>
				</view>
				<uni-tooltip :content="prozyNameList.join(',')" placement="top" v-else>
					<view class="ellipsis-text">
						<text class="fw-600 fs-26"> 专业：</text>
						<text> {{ prozyNameList.join(',') }}</text>
					</view>
				</uni-tooltip>
			</view>
			<view class="rowsb rowsm mt-10 fs-26" v-if="userId">
				<view class="ellipsis-text" v-if="itemData.userBjName">
					<text class="fw-600 fs-26"> 班级：</text>
					<text>{{ itemData.userBjName }}</text>
				</view>
				<uni-tooltip :content="probjNameList.join(',')" placement="top" v-else>
					<view class="ellipsis-text">
						<text class="fw-600 fs-26"> 班级：</text>
						<text>{{ probjNameList.join(',') }}</text>
					</view>
				</uni-tooltip>
				<!-- <view class="ellipsis-text" v-if="itemData.userNjName">
					<text class="fw-600 fs-26"> 年级：</text>
					<text>{{ itemData.userNjName }}</text>
				</view>
				<uni-tooltip :content="itemData.faceNj" placement="top" v-else>
					<view class="ellipsis-text">
						<text class="fw-600 fs-26"> 年级：</text>
						<text>{{ itemData.faceNj || '全部' }}</text>
					</view>
				</uni-tooltip> -->
				<view class="ellipsis-text">
					<text class="fs-26 fw-600">积分上限：</text>
					<text>{{ itemData.score }}</text>
				</view>
			</view>
			<view class="fs-26 mt-10">
				<text class="fw-600"> 考试时间：</text>
				<text>{{ itemData.startTime.slice(0, 10) }} ~ {{ itemData.endTime.slice(0, 10) }}</text>
			</view>
			<view class="rowsb rowsm mt-10 fs-26" v-if="!analyzeId">
				<view class="ellipsis-text">
					<text class="fw-600 fs-26"> 发布时间：</text>
					<text>{{ (itemData.releaseTime || '').slice(0, 16) }}</text>
				</view>
			</view>
			<view class="rowsb rowsm mt-10 fs-26">
				<view class="ellipsis-text">
					<text class="fs-26 fw-600">提交时间：</text>
					<text>{{ examTime }}</text>
				</view>
			</view>
			<view class="rowsb rowsm mt-10 fs-26">
				<view class="ellipsis-text">
					<text class="fs-26 fw-600">获得积分：</text>
					<text>{{ queryScore }}</text>
				</view>
				<view class="ellipsis-text">
					<text class="fs-26 fw-600">得分率：</text>
					<text>{{ ((queryScore / itemData.score) * 100).toFixed(2) }} %</text>
				</view>
			</view>
			<!-- <view class="rowsb rowsm mt-10 fs-26">
			</view> -->
			<view class="fs-26 mt-10">
				本次知识问答单选题{{ itemData.selectNumber }}道、判断题{{ itemData.judgeNumber }}道、多选题{{ itemData.multipleNumber }}道，
				一共{{ itemData.selectNumber + itemData.judgeNumber + itemData.multipleNumber }}道题目。
			</view>
		</uni-card>

		<uni-card>
			<view class="inforClass">试题预览:</view>
			<view class="item" v-for="(item, index) in problemList" :key="index">
				<view class="fs-30 mt-20 mb-20 col333 u-border-top pt-16" style="display: flex">
					{{ index + 1 }}. {{ item.type == 1 ? '单选题' : item.type == 2 ? '判断题' : '多选题' }}
					({{ item.type == 1 ? selectScore : item.type == 2 ? judgeScore : multipleScore }}分)
				</view>
				<view class="contentClass" v-html="item.questionContent"></view>
				<view v-for="(it, index) in item.questionBankOptionList" :key="index">

					<view class="answer" style="display: flex">
						<view style="width: 9%;">
							<view class="unchecked" :class="it.selected == 1 ? 'active' : ''"> {{ it.name }}</view>
						</view>
						<view class="ml-10" v-html="it.content"></view>
					</view>
				</view>
				<!-- <view class="mb-20 mt-20 fs-26 mb-20" v-if="!userId">
					<view style="display: flex;">
						<view class="fs-28 mr-10"> 正确答案: </view>
						<view> {{ (item.answerList || []).join('、') }} </view>
					</view>
					<view style="display: flex;">
						<view class="fs-28 mr-10" style="white-space: nowrap;"> 解析: </view>
						<view v-html="item.answerAnalysis"></view> v-else
					</view>
				</view> -->

				<view class="mb-20 mt-20 fs-26 mb-20">
					<view style="color: #78c950;" v-if="item.isTurn"><uni-icons type="checkbox-filled"
							color="#78c950"></uni-icons>回答正确</view>
					<view style="color: #fe6c6c;" v-else><uni-icons type="clear" color="#fe6c6c"></uni-icons>正确答案: {{
						(item.answerList || []).join('、') }}</view>
				</view>
			</view>
		</uni-card>
		<!-- <view class="w100 rowsa rowsm mt-50 mb-50" style="bottom: 100rpx;" v-if="userId">
      <view class="w-202 h-84 br-42 rowsc rowsm colfff" style="background: linear-gradient(to bottom,#ff4949,#ff4949);"
        @click="handleWithdraw">重做</view>
    </view> -->
	</view>
</template>
<script>
export default {
	data() {
		return {
			problemList: [],
			itemData: {},
			analyzeId: null,
			userId: null,
			prozyNameList: [],
			proxyNameList: [],
			probjNameList: [],
			selectScore: 0,
			judgeScore: 0,
			multipleScore: 0,
			examTime: '',
			queryScore: 0,
			practiceType: [],
		}
	},
	onLoad(e) {
		this.itemData = JSON.parse(e.item);
		this.analyzeId = this.itemData.id;
		this.userId = e.userId;
		this.selectScore = this.itemData ? this.itemData.selectScore : e.selectScore;
		this.judgeScore = this.itemData ? this.itemData.judgeScore : e.judgeScore;
		this.multipleScore = this.itemData ? this.itemData.multipleScore : e.multipleScore;
		this.getTypeCongfigList();
		this.getInfo();
		uni.setNavigationBarTitle({
			title: this.userId ? '学生详情' : '答案解析'
		})
		// if (this.userId) {
		// 	this.getListProxy();
		// 	this.getListProzy();
		// 	this.getListProbj();
		// }
	},
	methods: {
		getTypeCongfigList() {
			this.$tools.axiosFromToken('GET', 'project/practice/type/config/listAll', {}, '加载中').then(res => {
				if (res.code != 200) return this.$tools.showtt(res.msg)
				this.practiceType = res.rows;
			})
		},
		getInfo() {
			const urlName = this.userId ? 'test/paper/user/getTestPaperInfoAnswerById' : 'test/paper/user/getTestPaperInfoAnswer';
			this.$tools.axiosFromToken('GET', urlName, { id: this.userId ? this.userId : this.analyzeId }, '加载中').then(res => {
				if (res.code != 200) return this.$tools.showtt(res.msg);
				this.problemList = res.data.list || res.data;
				this.examTime = res.data.list ? (res.data.testPaperUser.createTime || '').slice(0, 16) : (this.itemData.createTime || '').slice(0, 16);
				this.queryScore = res.data.list ? (res.data.testPaperUser || {}).score : this.itemData.haveScore;
				this.problemList.forEach(item => {
					item.answerList = [];
					item.questionBankOptionList.forEach(it => {
						if (it.answer === 1) {
							item.answerList.push(it.name)
						}
						// if (this.userId && (item.type == 1 || item.type == 2)) {
						if ((item.type == 1 || item.type == 2) && !item.isTurn) {
							it.selected = it.selected == 1 ? true : false;
							item.isTurn = it.answer === 1 && it.answer == it.selected ? true : false;
						}
					})
					// if (this.userId && item.type == 3) {
					if (item.type == 3) {
						let correctAnswers = item.questionBankOptionList.filter(option => option.answer); // 获取正确答案的选项
						let selectedAnswers = item.questionBankOptionList.filter(option => option.selected); // 获取用户选择的选项
						const isTurn = correctAnswers.every((itemAnswers, index) => itemAnswers.answer === (selectedAnswers[index] || {}).answer);
						item.isTurn = correctAnswers.length == selectedAnswers.length && isTurn ? true : false;
						item.answerList = correctAnswers.map(cyj => cyj.name)
					}
				})
			})
		},

		// 查询学院
		getListProxy() {
			this.$tools.axiosFromToken('GET', 'project/proxy/listTotalAll', {}, '加载中').then(res => {
				if (res.code != 200) return this.$tools.showtt(res.msg)
				// this.proxyList = res.rows;

				this.proxyNameList = [];
				res.rows.forEach(v => {
					this.itemData.faceXy.split(',').forEach(y => {
						if (v.id == y) {
							this.proxyNameList.push(v.name)
						}
					})
				})
			})
		},

		getListProzy() {
			this.$tools.axiosFromToken('GET', 'project/prozy/listTotalAll', {}, '加载中').then(res => {
				if (res.code != 200) return this.$tools.showtt(res.msg)
				// this.prozyList = res.rows;
				this.prozyNameList = [];
				res.rows.forEach(v => {
					this.itemData.faceZy.split(',').forEach(y => {
						if (v.id == y) {
							this.prozyNameList.push(v.name)
						}
					})
				})
			})
		},
		getListProbj() {
			this.$tools.axiosFromToken('GET', 'project/probj/listTotalAll', {}, '加载中').then(res => {
				if (res.code != 200) return this.$tools.showtt(res.msg)
				// this.probjList = res.rows;
				this.probjNameList = [];
				res.rows.forEach(v => {
					this.itemData.faceBj.split(',').forEach(y => {
						if (v.id == y) {
							this.probjNameList.push(v.name)
						}
					})
				})
			})
		},
		handleWithdraw() {
			uni.showModal({
				title: '确认重做',
				content: `是否确定让该同学重做?`,
				success: (res) => {
					if (res.confirm) {
						this.$tools.axiosFromToken('DELETE', `test/paper/user/${this.userId}`, {}, '加载中').then(res => {
							this.$tools.showtt(res.msg);
							if (res.code != 200) return;
							this.$tools.showtt('撤回成功');
							uni.navigateBack(1)
						})
					} else if (res.cancel) {
						// 用户点击了“取消”
						console.log('取消删除');
					}
				}
			});
		},
	}
}
</script>
<style lang="scss">
page {
	background-color: #f4f5f7;
	padding-bottom: 20rpx;
}

::v-deep .uni-card {
	margin-left: 5px !important;
	margin-right: 5px !important;
	overflow: visible;
}

::v-deep .uni-card__content {
	color: #000 !important;
}

::v-deep .uni-tooltip {
	width: 50%;
	display: flex;
}

::v-deep .uni-tooltip-popup {
	top: 20px;
	right: 0;
	text-align: justify;
	word-wrap: break-word;
}

.answer {
	padding: 24rpx;
	background: #f4f8fb;
	margin-bottom: 40rpx;
	font-size: 26rpx;
	color: #333;
	border-radius: 20rpx;
}

.ellipsis-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	display: inline-block;
}

.active {
	background: rgb(81, 219, 47);
}

.inforClass {
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	margin: 8px 0;
}

.inforClass::before {
	content: '';
	width: 5px;
	height: 20px;
	background-color: #007AFF;
	margin-right: 5px;
	display: inline-block;
}

.unchecked {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	text-align: center;
	line-height: 1;
	margin-right: 10rpx;
	border: 2rpx solid #ced1d5;
	padding-top: 4px;
	color: #bebebe;
}

.active {
	background: #08c67f;
	border: 0;
	color: #fff;
}
</style>